<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>饼图</title>
</head>
<body>


<script src="../node_modules/d3/build/d3.js"></script>
<script>
  let pie = d3.pie(),
    colorScale = d3.schemeCategory10,
    data = [13, 22, 45, 33, 26],
    pieDate = pie(data),
    innerR = 100, outterR = 150;
  let svg = d3.selectAll('body').append('svg').attr('width', 400).attr('height', 400);
  let arc = d3.arc().innerRadius(innerR).outerRadius(outterR);
  let arcs = svg.selectAll('g').data(pieDate).enter().append('g')
    .attr('transform', `translate(200,200)`);

  arcs.append('path')
    .attr('fill', function (d, i) {
      return colorScale[i]
    })
    .attr('d', function (d) {
      // console.log(d, arc(d));
      return arc(d)
    });
  arcs.append('text')
    .attr('transform', function (d) {
      return `translate(${arc.centroid(d)})`;
    })
    .attr('text-anchor', 'middle')
    .text(function (d) {
      return d.data;
    })


</script>


</body>
</html>